// 经营情况
import { useRef, useEffect } from "react"
import * as echarts from "echarts"

const getOption1 = ({ data, years }, unit) => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: years
    },
    yAxis: {
      type: "value",
      name: unit ? `单位：${unit}` : "",
      min: 0,
      axisLabel: {}
    },
    series: [
      {
        data: data,
        type: "line",
        areaStyle: {}
      }
    ]
  }
}

const getOption2 = (data = {}) => {
  const { series, unit, legendPosition } = data

  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    legend: {
      positon: legendPosition,
      data: series.map((item) => item.name)
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: data.labels
      }
    ],
    yAxis: [
      {
        type: "value",
        name: unit,
        min: 0
      }
    ],
    series: series
  }
}

const BusinessCase = ({
  // 资产总额 负债率 售电总量 同业对标
  assetInfo = {},
  debtRatioTrend = {},
  electricitySalesTrend = {},
  industryBenchmarkChart = {}
}) => {
  // 负债率
  const chartRef1 = useRef(null)
  const myChart1 = useRef(null)
  useEffect(() => {
    if (chartRef1.current) {
      if (!myChart1.current) {
        myChart1.current = echarts.init(chartRef1.current)
      }
      myChart1.current.setOption(getOption1(debtRatioTrend, "%"))
    }
  }, [debtRatioTrend])

  // 售电总量
  const chartRef2 = useRef(null)
  const myChart2 = useRef(null)
  useEffect(() => {
    if (chartRef2.current) {
      if (!myChart2.current) {
        myChart2.current = echarts.init(chartRef2.current)
      }
      myChart2.current.setOption(getOption1(electricitySalesTrend))
    }
  }, [electricitySalesTrend])

  // 同业对标
  const chartRef3 = useRef(null)
  const myChart3 = useRef(null)
  useEffect(() => {
    if (chartRef3.current) {
      if (!myChart3.current) {
        myChart3.current = echarts.init(chartRef3.current)
      }
      myChart3.current.setOption(getOption2(industryBenchmarkChart))
    }
  }, [industryBenchmarkChart])

  // 处理资产总额数据
  const getAssetNum = (num) => {
    return (num / 100000000).toFixed(2)
  }

  return (
    <div className="text-[14px] mt-[15px] border-1 border-white rounded-[8px] p-[12px]">
      <div
        className="w-[365px] h-[36px] leading-[36px]"
        style={{
          backgroundImage: `url('assistant-decision/base-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        <span className="ml-[30px] text-white text-[16px] font-[600]">
          经营情况
        </span>
      </div>
      <div
        className="mt-[12px] w-[169px] h-[32px] text-white text-center leading-[32px]"
        style={{
          backgroundImage: `url('assistant-decision/base-business-title_bg.png')`,
          backgroundRepeat: "no-repeat"
        }}
      >
        <span>资产分布总览</span>
      </div>
      <div
        className="h-[66px] flex items-center"
        style={{
          backgroundImage: `url('assistant-decision/base-business-count_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "bottom",
          backgroundSize: "contain"
        }}
      >
        <div
          className="w-[49px] h-[46px] ml-[23px]"
          style={{
            backgroundImage: `url('assistant-decision/base-business-count_icon.png')`,
            backgroundRepeat: "no-repeat"
          }}
        ></div>
        <div className="ml-[8px] h-[30px]text-[14px] flex items-center">
          <div className="w-[72px]">资产总额</div>
          <div className="text-[#008BFF] font-[600] text-[24px]">
            {getAssetNum(assetInfo.totalAssets)}
          </div>
          <div>亿元</div>
        </div>
        <div className="ml-[51px] h-[30px]text-[14px] flex items-center">
          <div className="w-[72px]">固定资产</div>
          <div className="text-[#008BFF] font-[600] text-[24px]">
            {getAssetNum(assetInfo.fixedAssets)}
          </div>
          <div>亿元</div>
        </div>
        <div className="ml-[51px] h-[30px]text-[14px] flex items-center">
          <div className="w-[72px]">负债资产</div>
          <div className="text-[#008BFF] font-[600] text-[24px]">
            {getAssetNum(assetInfo.totalLiabilities)}
          </div>
          <div>亿元</div>
        </div>
      </div>
      {/* 负债率 售电总量 */}
      <div className="flex items-center mt-[12px]">
        <div className="w-[404px]">
          <div className="flex items-center mt-[12px]">
            <div
              className="w-[169px] h-[32px] text-white text-center leading-[32px]"
              style={{
                backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
                backgroundRepeat: "no-repeat"
              }}
            >
              <span>负债率</span>
            </div>
            <div className="flex items-center">
              <div
                className="w-[20px] h-[20px] ml-[12px]"
                style={{
                  backgroundImage: `url('assistant-decision/think_icon.png')`
                }}
              ></div>
              <div className="text-[#008BFF]">展开思考过程</div>
            </div>
          </div>
          <div
            ref={chartRef1}
            className="w-full h-[220px] mt-4 ml-[20px]"
          ></div>
        </div>
        <div className="w-[404px]">
          <div className="flex items-center mt-[12px]">
            <div
              className="w-[169px] h-[32px] text-white text-center leading-[32px]"
              style={{
                backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
                backgroundRepeat: "no-repeat"
              }}
            >
              <span>售电总量</span>
            </div>
            <div className="flex items-center">
              <div
                className="w-[20px] h-[20px] ml-[12px]"
                style={{
                  backgroundImage: `url('assistant-decision/think_icon.png')`
                }}
              ></div>
              <div className="text-[#008BFF]">展开思考过程</div>
            </div>
          </div>
          <div
            ref={chartRef2}
            className="w-full h-[220px] mt-4 ml-[20px]"
          ></div>
        </div>
      </div>
      {/* 同业对标 */}
      <div className="w-full">
        <div className="flex items-center mt-[12px]">
          <div
            className="w-[169px] h-[32px] text-white text-center leading-[32px]"
            style={{
              backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
              backgroundRepeat: "no-repeat"
            }}
          >
            <span>同业对标</span>
          </div>
          <div className="flex items-center">
            <div
              className="w-[20px] h-[20px] ml-[12px]"
              style={{
                backgroundImage: `url('assistant-decision/think_icon.png')`
              }}
            ></div>
            <div className="text-[#008BFF]">展开思考过程</div>
          </div>
        </div>
        <div ref={chartRef3} className="w-full h-[220px] mt-4 ml-[20px]"></div>
      </div>
    </div>
  )
}

export default BusinessCase
